import React, { useState } from 'react'

import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Footer,Content, Sider } = Layout;
export default function Example11() {
    const [side, setSide] = useState(false);
    function abc() {
       // setSide( side => side = !side)
       setSide((side)=>{
            return side = !side;
       })
    }
    return(
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible style={{ background: '#fff'}} collapsed={side}  onCollapse={abc}>
            <div className="logo" />
            <Menu defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1">
                <Icon type="pie-chart" />
                <span>Option 1</span>
            </Menu.Item>
            <Menu.Item key="2">
                <Icon type="desktop" />
                <span>Option 2</span>
            </Menu.Item>
            <SubMenu
                key="sub1"
                title={
                <span>
                    <Icon type="user" />
                    <span>User</span>
                </span>
                }
            >
                <Menu.Item key="3">Tom</Menu.Item>
                <Menu.Item key="4">Bill</Menu.Item>
                <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu
                key="sub2"
                title={
                <span>
                    <Icon type="team" />
                    <span>Team</span>
                </span>
                }
            >
                <Menu.Item key="6">Team 1</Menu.Item>
                <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9">
                <Icon type="file" />
                <span>File</span>
            </Menu.Item>
            </Menu>
        </Sider>

        <Layout>
        <Header style={{ background: '#fff', padding: 0 }} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>

          
          
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>

        </Layout>
    )
}